import { useState } from 'react';
import WritingPractice from './components/WritingPractice';
import History from './components/History';
import './index.css';

function App() {
  const [currentPage, setCurrentPage] = useState('practice');

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
      {/* 导航栏 */}
      <nav className="bg-white shadow-lg border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex justify-between items-center">
            {/* Logo和标题 */}
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center shadow-md">
                <span className="text-2xl">📝</span>
              </div>
              <div>
                <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                  IELTS Writing
                </h1>
                <p className="text-xs text-gray-500">雅思写作练习系统</p>
              </div>
            </div>

            {/* 导航按钮 */}
            <div className="flex items-center gap-3">
              <div className="hidden md:flex items-center bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 rounded-lg border border-blue-200">
                <span className="text-sm text-gray-600">欢迎使用</span>
                <span className="ml-1 font-semibold text-blue-700">雅思写作练习系统</span>
              </div>
              <button
                onClick={() => setCurrentPage('practice')}
                className={`px-5 py-2.5 rounded-lg font-medium transition-all transform hover:scale-105 ${
                  currentPage === 'practice'
                    ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg'
                    : 'bg-white text-gray-700 hover:bg-gray-50 border-2 border-gray-200'
                }`}
              >
                <span className="flex items-center">
                  ✍️ <span className="ml-2">开始练习</span>
                </span>
              </button>
              <button
                onClick={() => setCurrentPage('history')}
                className={`px-5 py-2.5 rounded-lg font-medium transition-all transform hover:scale-105 ${
                  currentPage === 'history'
                    ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg'
                    : 'bg-white text-gray-700 hover:bg-gray-50 border-2 border-gray-200'
                }`}
              >
                <span className="flex items-center">
                  📚 <span className="ml-2">历史记录</span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* 主内容区域 */}
      <main>
        {currentPage === 'practice' && <WritingPractice onNavigateToHistory={() => setCurrentPage('history')} />}
        {currentPage === 'history' && <History />}
      </main>

      {/* 页脚 */}
      <footer className="bg-white border-t mt-12 shadow-inner">
        <div className="max-w-7xl mx-auto px-4 py-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="text-center md:text-left mb-4 md:mb-0">
              <p className="text-gray-700 font-semibold">雅思写作练习系统 © 2024</p>
              <p className="text-sm text-gray-500 mt-1">
                助力您的雅思写作之路
              </p>
            </div>
            <div className="flex items-center space-x-6">
              <div className="text-center">
                <p className="text-xs text-gray-500">技术栈</p>
                <div className="flex items-center space-x-2 mt-1">
                  <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded font-medium">React</span>
                  <span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded font-medium">Node.js</span>
                  <span className="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded font-medium">MongoDB</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default App;
